<template>
  <div class="box">
    后台首页
    <Card>
      <span slot="title">在干嘛</span>
      <div slot="title1">
        <!-- 头部 -->
        <div class="box22">
          <div v-for="(item, i) in form" :key="i">
            <!-- 字体图标 -->
            <div class="top">
              <div><i :class="item.class"></i></div>
              <div>
                <h2>{{ item.name }}</h2>
                <p>{{ item.num }}</p>
              </div>
            </div>
          </div>
        </div>
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <!-- 通过谷子传递关系让他们数据传递 -->
        <Charts v-if="isshow" :option="option" />
      </div>
    </Card>
  </div>
</template>

<script>
import Card from "@/components/Card.vue";

import { apiecharts1_js } from "@/apis/Echarts.js";
import Charts from "@/components/Charts.vue";
export default {
  components: {
    Card,
    Charts,
  },
  data() {
    return {
      isshow: false,
      //定义一个公共的头部组件
      form: [
        { name: "总订单", class: "iconfont icon-003-atole", num: "" },
        { name: "总销售量", class: "iconfont icon-001-skull", num: "" },
        { name: "今日订单数", class: "iconfont icon-025-rebozo", num: "" },
        {
          name: "今日销售额",
          class: "iconfont icon-030-xoloitzcuintle",
          num: "",
        },
      ],
      option: {
        text: "数据统计",
        xData: "",
        amountData: "",
        orderData: "",
        type: "line",
        title: {
          name1: "订单数据",
          name2: "金额数据",
        },
      },

      //通过标杆来实现它的渲染顺序
    };
  },

  async created() {
    let {
      xData, //x轴数据
      amountData, //订单数据
      orderData, //金额数量
      todayOrder,
      totalAmount,
      totalOrder,
      totayAmount,
    } = await apiecharts1_js();
    let newarr = [todayOrder, totalAmount, totalOrder, totayAmount];
    let res = this.form.map((item, i) => {
      item.num = newarr[i];
    });

    this.option.xData = xData;
    this.option.amountData = amountData;
    this.option.orderData = orderData;
    this.isshow = true;

    console.log("发送echats");
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 20px;
  box-sizing: border-box;
}
.top {
  display: flex;
  align-items: center;
  justify-content: space-around;
  i {
    font-size: 100px;
  }

  div {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-right: 20px;
    h2 {
      color: #dbdbdb;

      font-size: 20px;
    }
    p {
      font-size: 20px;
      margin-top: 8px;
    }
  }
}
.box3 {
  display: flex;
}
.box22 {
  display: flex;
  justify-content: space-around;
}
</style>